<template>
  <div class="total-pie-special-label">
    <div class="total-pie-special-label-title">活动完成情况</div>
    <div v-show="isData" id="echart1" class="account-display-echart" ref="pieChart"></div>
    <div v-show="!isData" class="total-pie-special-label-no-data">暂无数据</div>
  </div>
</template>

<script>
    import API from '../../../../api/mp/gameData'

    export default {
        name: 'TotalPieSpecialLabel',
        data () {
            return {
                initEchart: '',
                totalData: {},
                isData: true,
                option: {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    grid: {
                        left: '6%',
                        right: '4%',
                        bottom: '3%',
                        width: '500'
                    },
                    legend: {
                        orient: 'vertical',
                        top: 'middle',
                        left: 10,
                        data: ['参与未推广', '推广未完成', '完成任务']
                    },
                    series: [
                        {
                            name: '活动完成情况统计',
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            selectedMode: 'single',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            }
        },
        methods: {
            init (gameId, mpId, gzhUserId) {
                API.gameCircleData({ gzhUserId: gzhUserId || '', gameId: gameId || '', mpId: mpId || '' }).then(res => {
                    if (Object.keys(res).length > 0) {
                        this.formatData(res)
                        this.initEchart = 'init'
                    }
                    const pieChart = window.echarts.init(this.$refs.pieChart)
                    pieChart.setOption(this.option)
                })
            },
            formatData (totalData) {
                if (this.initEchart) {
                    this.option.series[0].data = []
                }
                this.option.series[0].data.push({
                    value: totalData.joinByPopNotFinish,
                    name: '推广未完成',
                    itemStyle: { color: '#ff688e' }
                })
                this.option.series[0].data.push({
                    value: totalData.joinNotPopNotFinish,
                    name: '参与未推广',
                    itemStyle: { color: '#40a9ff' }
                })
                this.option.series[0].data.push({
                    value: totalData.finish,
                    name: '完成任务',
                    itemStyle: { color: '#ffc71b' }
                })
                if (totalData.joinByPopNotFinish === 0 && totalData.joinNotPopNotFinish === 0 && totalData.finish === 0) {
                    this.isData = false
                } else {
                    this.isData = true
                }
            }
        }
    }
</script>

<style lang="less">
    .total-pie-special-label {
        padding: 0 20px;
        height: 340px;
        min-width: 600px;
        background: white;
        overflow: hidden;

        .total-pie-special-label-title {
            border-bottom: 1px solid #f0f0f0;
            padding: 15px 0;
        }

        .total-pie-special-label-no-data {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #909399;
        }

        .account-display-echart {
            width: 600px;
            min-height: 250px;
        }
    }
</style>
